<template>
  <div>
    <div class="footer_warp">
      <router-link to="/find?music=烟distance">发现音乐</router-link>
      <!-- 查询参数传参方式——适合多个参数进行传参 -->
      <router-link to="/myMusic/东百往事">我的音乐</router-link>
      <!-- 动态路由传参方式——适合单个参数传参 -->
      <router-link to="/myFriend?friend=田硕浩二">朋友</router-link>
      <!-- to属性指定的路径无需添加# 在路径后添加?参数名=值 即可实现查询参数传参
        router-link标签支持高亮，通过 .router-link-active(可配置更改名字)控制高亮样式 -->
      <!-- router-link-active 模糊匹配 -->
      <!-- router-link-exact-active 精确匹配-->
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      musicName:'烟distance'
    }
  },
}
</script>

<style>
body{
  margin: 0;
}
.footer_warp{
  width: 100%;
  height: 70px;
  position: relative;
  left: 0;
  top:0;
  display: flex;
  background-color: rgb(52,51,52);
}
a{
  width: 34%;
  height: 100%;
  line-height: 70px;
  border-right: 2px black solid;
  text-align: center;
  text-decoration: none;
  color: rgb(207,201,202);
  transition: all .5s ease-in-out;
}
a.shio{
  color: white;
  background-color: rgb(252,61,73);
}
a:hover{
  background-color: rgb(85,85,85);
}
.main{
  position:absolute;
}

</style>
